<ion-view id="copayers-invitation" hide-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>{{wallet.name}}</ion-nav-title>
    <ion-nav-buttons side="secondary">
      <button class="button-share ng-hide" ng-show="isCordova && secret" ng-click="shareSecret()">
        <i class="icon"
           ng-class="{
           'ion-ios-upload-outline': shareIcon == 'iOS',
           'ion-android-share-alt': shareIcon != 'iOS'
           }"></i>
      </button>
    </ion-nav-buttons>
  </ion-nav-bar>

  <ion-content>
    <div ng-show="!wallet.notAuthorized">
      <div class="list text-center">
        <div class="item item-heading item-text-wrap" translate>
          Share this invitation with your copayers
        </div>
        <div class="item text-center">
          <div copy-to-clipboard="secret">
          <qrcode size="220" error-correction-level="L" data="{{secret}}" color="#334"></qrcode>
          <div ng-show="!secret" style="position:relative; top:-226px; height:0px">
            <div style="height:220px; width:220px; margin:auto; background: white">
              <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
            </div>
          </div>
          <div class="copayers-secret">
            {{secret || ('Loading...'|translate)}}
          </div>
          </div>
          <button ng-if="secret" class="button-cancel" ng-click="showDeletePopup()">
            <span translate>Cancel invitation</span>
          </button>
        </div>
      </div>

      <div ng-show="secret">

        <div class="list card">
          <div class="item item-heading">
            <span class="text-gray right">
              [ <span translate>{{wallet.m}}-of-{{wallet.n}}</span> ]
            </span>
            <span translate>Waiting for copayers</span>
          </div>
          <div ng-include="'views/includes/copayers.html'"></div>
          <div ng-if="!wallet.isComplete()" class="item item-icon-left">
            <i class="icon ion-loop"></i>
            {{'Waiting...'|translate}}
          </div>
        </div>

        <div class="m30v text-center" ng-show="wallet.notAuthorized">
          <h1 translate>Wallet incomplete and broken</h1>
          <h4 translate>Delete it and create a new one</h4>
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>
